<template>
  <div id="app">
    <Topbar :key="topbarKey" />
    <Header />
    <router-view @updataKey="updataKeyFn"/>
    <Footer />
    <Login v-show="isShowLoginModal" />
    <transition name="slide">
      <Toast v-show="isShowToast" />
    </transition>
  </div>
</template>

<script>
import Topbar from "./components/Topbar.vue";
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
import Login from "./components/Login";
import Toast from "./components/Toast";
import { JinPingAPI } from "./request/api";
import { mapState } from "vuex";
export default {
  data() {
    return {
      topbarKey: 0,
    };
  },
  components: {
    Topbar,
    Header,
    Footer,
    Login,
    Toast,
  },
  computed: {
    ...mapState({
      isShowLoginModal: (state) => state.showModal.isShowLoginModal,
      isShowToast: (state) => state.showToast.isShowToast,
    }),
  },
  created() {
    // 解决：使用request.js封装axios
    // 缺点2：如果后端修改了接口地址，所有组件都需要修改。
    // 解决：使用api.js统一管理接口地址
    // 缺点3：如果有token,每一次请求都需要携带携带请求头代码
    // 解决：使用axios中的拦截器
    // 缺点4：如果项目中的请求顺序必须是先请求A完成再继续Babc
    // 现有方式不太直观。可能会出现回调地狱的问题。！
    // 解决：
    // 使用async await来解决，可以通过它实现异步代码同步化写法。
    // await等待的是一个promise的结果。
    // await它需要放在async修饰的函数内。
    // axios.get("http://192.168.113.249:8081/cms/products/recommend").then((res)=>{console.log("res:",res);})
    JinPingAPI().then((res) => {
      console.log("res:", res);
    });
  },
  methods: {
    // fn(){
    //   JinPingAPI().then((res) => {
    //   console.log("res:", res);
    // });
    // }
    async fn() {
      let res = await JinPingAPI();
      console.log("res1:", res);
    },
    updataKeyFn(){
      this.topbarKey++
    }
  },
  watch: {
    "$route.path": {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
        this.topbarKey++;
      },
    },
  },
};
</script>

<style lang="less">
.slide-enter,
.slide-leave-to {
  opacity: 0;
}
.slide-enter-active,
.slide-leave-active {
  transition: opacity 0.5s linear;
}
.slide-enter-to,
.slide-leave {
  opacity: 1;
}
</style>
